<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/602498 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="513"/>

<div>
<span><div><div><span style="color: rgb(255, 0, 0); font-family: 华文隶书; font-size: 18pt;">HTML 详解</span></div><div><br/></div><div>HTML介绍：超文本/标签语言</div><div>专门制作网站的计算机语言</div><div>开发时文件的后缀名必须是“htm”or &quot;html&quot;</div><div>&lt;html&gt;标签标识当前页面是一个HTML</div><div>&lt;head&gt;标签可以生命HTML页面的相关信息</div><div>&lt;body&gt;标签中主要用于显示页面信息</div><div>标签必须成双成对</div><div>大多数属标签具有属性，属性值要用引号</div><div>HTML本身不区分大小写</div><div><br/></div><div><span style="font-size: 16pt;">HTML的使用</span></div><div>&lt;body&gt;标签的属性</div><div>text: 用于设置文字颜色</div><div>bfcolor:设置页面的背景颜色</div><div>background:设置页面的背景图片</div><div><br/></div><div>排版标签</div><div>换行标签&lt;br/&gt;:</div><div>段落标签&lt;p&gt; 在开始与结束之间产生空白行 并且会自动换行</div><div>&lt;p&gt;的常用属性：align 设置段落中内容的对齐方式  eg:&lt;p align=&quot;left/center/right&quot;&gt;</div><div><br/></div><div><span style="font-size: 16pt;">水平线标签</span></div><div>&lt;hr&gt;在页面上产生一个水平线</div><div>常用属性：</div><div>align:水平线位置</div><div>size:水平线粗细</div><div>width:水平线宽度</div><div>color: 水平线颜色</div><div><br/></div><div>分区标签</div><div>div:块标签 ，用来进行布局</div><div><br/></div><div>div与span的具体区别</div><ol><li><div>div会自动换行 ，这样的标签叫块级元素</div></li><li><div>span不会自动换行，橙汁味行内元素</div></li><li><div>div整体划分区块</div></li><li><div>span局部划分</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">字体标签</span></div><div>&lt;font&gt;标签可设置字体 字体大小 字体颜色 </div><div>常用属性：</div><div>face:设置字体</div><div>size:设置字体大小（默认大小位1——7）</div><div>color: 设置字体颜色</div><div><br/></div><div><span style="font-size: 14pt;">注意</span>：所有颜色为 红绿蓝组成</div><div><br/></div><div><span style="font-size: 16pt;">标题标签</span></div><div>&lt;h1&gt;-----&lt;h6&gt; 从大到小 自动换行 字体根据标签大小进行加粗 标题与标题之间会产生一定的距离</div><div>注：在HTML标签中允许进行嵌套，单数一般都包裹嵌套，但不能进行交叉嵌套</div><div><br/></div><div><span style="font-size: 16pt;">格式化标签：</span></div><div>&lt;b&gt;:字体加粗</div><div>&lt;i&gt;：字体倾斜</div><div>&lt;del&gt;：删除线</div><div>&lt;u&gt;下划线</div><div><br/></div><div><span style="font-size: 16pt;">列表标记</span></div><div>ol:有序列表</div><div>属性：type=&quot;A&quot; 字母排序</div><div>           type=&quot;I&quot; 罗马排序</div><div>           start=&quot;3&quot; 序列从几开始</div><div><br/></div><div>ul:无序列表</div><div>属性： type=&quot;disc&quot;：默认，实心圆</div><div>           type=&quot;square&quot;：方块</div><div>           type=&quot;circle&quot;：空心圆</div><div><br/></div><div>图像标签</div><div>&lt;img&gt;</div><div>属性：</div><ol><li><div>src:图片路径</div></li><li><div>width 图片宽度</div></li><li><div>height 图片高度</div></li><li><div>border 用于设置图片边框</div></li><li><div>alt 若图片不显示时 则默认显示文本信息</div></li><li><div>title 鼠标悬停图片上，默认显示的文本信息</div></li><li><div>align 图片附件文字的对齐方式  可取值为：left,right,middle(对齐中央)，top,bottom(图像与底部对齐  （默认）)</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">超链接标签</span></div><div>&lt;a&gt; 用于跳转到其他页面</div><div>属性：</div><ol><li><div>href: 跳转的路径</div></li></ol><div><br/></div><div>表格：</div><div><br/></div><div>&lt;table&gt;:定义一个表格</div><div>属性：</div><ol><li><div>border:边框</div></li><li><div>width</div></li><li><div>height</div></li></ol><div>&lt;tr&gt;:表格中的行</div><div>属性：</div><ol><li><div>align(默认为left)</div></li></ol><div>&lt;td&gt;:表格中的数据单元格</div><div>colspan表示列的合并</div><div>rowspan 指示行的合并</div><div><br/></div><div><span style="font-size: 16pt;">表单标签</span></div><div>可以让我们将录入信息携带到服务器端</div><div><br/></div><div>form属性</div><div>action:表单的提交目的地</div><div>method:表单提交方式</div><div><br/></div><div>表单中元素</div><div>&lt;input&gt;元素的type属性</div><ol><li><div>text:默认普通的文本框</div></li></ol><div>            placeholder属性：提示文本</div><div><span style="font-size: unset; color: unset; font-family: unset;">            maxlength属性：最多能输入字符数量</span></div><ol start="2"><li><div>password:密码</div></li><li><div>checkbox：多选框/复选框  checked表示被选中</div></li><li><div>radio:单选按钮</div></li><li><div>file:上传文件</div></li><li><div>reset:重置按钮</div></li><li><div>submit:提交按钮</div></li><li><div>button:普通按钮</div></li></ol><div><br/></div><div>&lt;select&gt;:下拉列表/下拉框</div><div>&lt;option&gt;:类表中的项  selected:被选中</div><div>&lt;textarea&gt;:文本域（多行文本框） 可通过cols和rows属性来规定该尺寸</div><div>&lt;button&gt;：按钮</div><ol><li><div>在form表单中等同于submit</div></li><li><div>不在form中就是普通按钮</div></li></ol><div><span style="font-size: 14pt;">注意</span>：</div><ol><li><div>所有表单中的元素都要具有名称</div></li><li><div>. 单选框要想可以一次只选择一个，要具有相同的name值</div></li><li><div>所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值</div></li></ol><div><br/></div><div><span style="font-size: 14pt;">框架标签</span></div><div>通过&lt;frameset&gt;和&lt;frame&gt; &gt;框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面</div><div><span style="font-size: 14pt;">注意</span>： 框架标签和body标签不共存。“有你没我，有我没你”</div><div><br/></div><div><span style="font-size: 14pt;">其他标签个特殊标签</span></div><div><span style="font-size: 12pt;">meta标签</span></div><div><span style="font-size: 10pt;">标签必须写在标签之间</span></div><div><span style="font-size: 10pt;">link标签</span></div><div><span style="font-size: 10pt;">标签必须写在标签之间</span></div><div><font style="font-size: 16pt;"><br/></font></div><div><span style="font-size: 16pt;">HTML5新增语义化标签</span></div><ol><li><div>section标签：表示页面中的内容区域，部分，页面的主体部分</div></li><li><div>article标签：文章</div></li><li><div>aside标签：文章内容之外的，标题</div></li><li><div>header标签：头部，页眉，页面的顶部</div></li><li><div>hgroup标签：内容与标题的组合</div></li><li><div>nav标签：导航</div></li><li><div>figure标签：图文并茂</div></li><li><div>foot：页脚，页面的底部</div></li></ol><div><span style="font-size: 12pt;">媒体表亲啊</span></div><div>想在网页上播放视频，就要使用<span style="font-size: unset; color: unset; font-family: unset;">：</span></div><div><span style="font-size: unset; color: unset; font-family: unset;">属性：</span></div><ol><li><div>src：媒体资源文件的位置</div></li><li><div>controls：控制面板</div></li><li><div>autoplay：自动播放（谷歌失效，360浏览器可以）</div></li><li><div>loop：循环播放</div></li></ol><div><span style="font-size: 12pt;">新增表单控件</span></div><div><span style="font-size: 10pt;">修改type属性</span><span style="font-size: 12pt;">：</span></div><ol><li><div>color：调色板</div></li><li><div>date：日历</div></li><li><div>month：月历</div></li><li><div>week：周历</div></li><li><div>number：数值域      min：最小值（默认值是1）     max：最大值（默认值无上限）    step：递增量</div></li></ol><div>进度条&lt;/progress&gt;</div><div>高亮&lt;mark&gt;</div><div>联想输入框&lt;datalist&gt;(模糊查询)</div><ol><li><div>选项&lt;option&gt;</div></li></ol><div><br/></div><div><br/></div><div><span style="color: rgb(255, 0, 0); font-family: 华文隶书; font-size: 24pt;">css详解</span></div><div><span style="font-size: 16pt;">css介绍：</span></div><ol><li><div>CSS是指层叠样式表 cascading style sheets</div></li><li><div>通过CSS可以让我们定义HTML元素如何显示。</div></li><li><div>CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。</div></li><li><div>通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。</div></li></ol><div><span style="font-size: 16pt;">css和HTML结合方式：</span></div><div><span style="font-size: 14pt;">第一种方式 内联/行内样式</span></div><div><span style="font-size: 10pt;">就是在我们的HTML标签上通过style属性来引用CSS代码</span></div><div><span style="font-size: 10pt;">优点：简单方便</span></div><div><span style="font-size: 10pt;">缺点：只能对一个标签进行修饰</span></div><div><font style="font-size: 10pt;"><br/></font></div><div><span style="font-size: 14pt;">第二种方式 内部样式表：</span></div><div>我们通过&lt;style&gt; 标签来声明我们的CSS. 通常&lt;style&gt; &gt;标签我们推荐写在head和body之间，也就是“脖子” 的位置</div><div>优点 :可以通过多个标签进行统一的样式设置</div><div>缺点: 它只能在本页面上进行修饰</div><div>语法： 选择器 {属性:值;属性:值}</div><div><br/></div><div><span style="font-size: 16pt;">第三种方式 外部样式表</span></div><div><font style="font-size: 10pt;"><br/></font></div><div>我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css</div><div>在项目根目录下，创建css目录，在css目录中创建css文件</div><div>在&lt;head&gt;和&lt;link&gt; 标签引用外部的css文件</div><div><br/></div><div><span style="font-size: 16pt;">css的使用</span></div><div><span style="font-size: 14pt;">css选择器</span></div><div><span style="font-size: 14pt;">元素(标签)选择器：</span>它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.</div><div><span style="font-size: 14pt;">类选择器：</span>类选择器在使用时使用&quot;.&quot;来描述，它描述的是元素上的class属性值</div><div><span style="font-size: 14pt;">id选择器:</span> <span style="font-size: 10pt;">它只能选择一个元素，使用 &quot;#&quot; 引入，引用的是元素的id属性值</span><span style="font-size: 14pt;">。</span> <span style="font-size: 10pt;">比类选择器更具有唯一性</span></div><div><span style="font-size: 14pt;">选择器组：</span> 逗号表示，谁和谁。</div><div><span style="font-size: 14pt;">派生选择器：</span></div><ol><li><div>子代：父子关系（隔代不管）</div></li><li><div>后代：父子孙，曾孙，从孙...</div></li></ol><div><span style="font-size: 14pt;">css伪类：</span></div><div>CSS伪类可对css的选择器添加一些特殊效果</div><div>属性：</div><ol><li><div>active 向被激活的元素添加样式。</div></li><li><div>hover 当鼠标悬浮在元素上方时，向元素添加样式。</div></li><li><div>link 向未被访问的链接添加样式。</div></li><li><div>visited 向已被访问的链接添加样式。</div></li><li><div>first-child 向元素的第一个子元素添加样式。</div></li></ol><div><br/></div><div>超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha</div><div><br/></div><div><span style="font-size: 16pt;">css基本属性</span></div><div><span style="font-size: 10pt;">文本属性：</span></div><ol><li><div>指定字体：font-family : value</div></li><li><div>字体大小：font-size : value;   （px 像素 em 倍数)</div></li><li><div>   字体加粗：font-weight : normal/bold;</div></li><li><div>文本颜色：color : value;</div></li><li><div>文本排列：text-align : left/right/center;</div></li><li><div>文字修饰：text-decoration : none/underline;</div></li><li><div>行高：line-height : value;</div></li><li><div>首行文本缩进：text-indent : value （2em）;</div></li></ol><div><br/></div><div>背景属性： CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。</div><ol><li><div>background-color 设置元素的背景颜色。</div></li><li><div>background-image 把图像设置为背景。</div></li><li><div>background-repeat 设置背景图像的墙纸效果，是否及如何重复</div></li></ol><div>                                  repeat：在垂直方向和水平方向重复，为重复值</div><div>                                  repeat-x：仅在水平方向重复 </div><div>                                  repeat-y：仅在垂直方向重复</div><div>                                  no-repeat：仅显示一次</div><ol start="4"><li><div>background-position 设置背景图像的起始位置</div></li><li><div>background-attachment 背景图像是否固定或者随着页面的其余部分滚动</div></li></ol><div><span style="font-size: unset; color: unset; font-family: unset;">                                  默认值是 scroll：默认情况下，背景会随文档滚动</span></div><div>                                  可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像</div><div><span style="font-size: 16pt;">列表属性</span></div><div><span style="font-size: 10pt;">css列表属性作用：</span></div><ol><li><div>设置不同的列表项标记为有序列表</div></li><li><div>设置不同的列表项标记为无序列表</div></li><li><div>设置列表项标记为图像</div></li></ol><div>有两种类型的列表：</div><ol><li><div><span style="font-size: unset; color: unset; font-family: unset;">无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）</span></div></li><li><div>有序列表 - 列表项的标记有数字或字母</div></li></ol><div><span style="font-size: 16pt;">css边框属性</span></div><div>CSS边框属性允许你指定一个元素边框的样式和颜色。</div><div><span style="font-size: 16pt;">css定位</span></div><div><span style="font-size: 14pt;">默认定位：</span></div><ol><li><div>块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高</div></li><li><div>行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高</div></li><li><div>行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高</div></li></ol><div><span style="font-size: 14pt;">浮动定位</span></div><div>让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。</div><div>float去质:</div><ol><li><div>none ：不浮动</div></li><li><div>left：贴着左边</div></li><li><div>right：贴着右边</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">相对定位</span></div><div>和原来的位置进行比较，进行移动定位（偏移）</div><div><br/></div><div><span style="font-size: 16pt;">绝对定位</span></div><div>本元素与已定位的祖先元素的距离</div><ol><li><div>如果父级元素定位了，就以父级为参照物；</div></li><li><div>如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。</div></li><li><div>如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。</div></li></ol><div><span style="font-size: 16pt;">固定定位</span></div><div>将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动</div><div><br/></div><div><span style="font-size: 16pt;">Z-index</span></div><div>如果有重叠元素，使用z轴属性，定义上下层次。 谁的Z值大谁在上面</div><div><br/></div><div><span style="font-size: 12pt;">注意：</span></div><ol><li><div>z轴属性，要配合相对或绝对定位来使用。</div></li><li><div>z值没有额定数值（整型就可以，具体用数字几，悉听尊便）</div></li></ol><div><font style="font-size: 16pt;"><br/></font></div><div><span style="font-size: 16pt;">css3</span></div><div><span style="font-size: 14pt;">圆角：</span></div><ol><li><div>border-radius：左上 右上 右下 左下;</div></li><li><div>border-radius：四个角;</div></li><li><div>border-radius：50%; 圆形</div></li></ol><div><span style="font-size: 16pt;">盒子阴影</span></div><div><span style="font-size: 12pt;">格式：box-shadow：1 2 3 4 5;</span></div><ol><li><div>水平偏移 垂直偏移 模糊半径 扩张半径 颜色</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">渐变</span></div><div><span style="font-size: 14pt;">线性渐变：</span></div><div>格式： background:linear-gradient([方向/角度]，颜色列表)；</div><div><br/></div><div><span style="font-size: 14pt;">径向渐变：</span></div><div>格式：background: radial-gradient(颜色列表);</div><div><br/></div><div><span style="font-size: 16pt;">背景</span></div><div><span style="font-size: 14pt;">北京位置</span></div><div><span style="font-size: 10pt;">background-origin：指定了背景图像的位置区域</span></div><ol><li><div>border-box : 背景贴边框的边</div></li><li><div>padding-box : 背景贴内边框的边</div></li><li><div>content-box : 背景贴内容的边</div></li></ol><div><span style="font-size: 14pt;">背景裁切：</span></div><div>格式： background-clip:、</div><ol><li><div>border-box 边框开切</div></li><li><div>padding-box 内边距开切</div></li><li><div>content-box 内容开切</div></li></ol><div><span style="font-size: 16pt;">背景大小</span></div><div><span style="font-size: 10pt;">格式：</span> background-size:</div><ol><li><div>cover 缩放成完全覆盖背景区域最小大小</div></li><li><div>contain 缩放成完全适应背景区域最大大小</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">过渡动画</span></div><div><span style="font-size: 14pt;">过渡：</span> <span style="font-size: 14pt;">从一个状态到另一个状态，中间的“缓慢”过程</span></div><div>缺点：控制不了中间某个时间点。</div><div>格式： transition｛1 2 3 4｝</div><div><span style="font-size: 14pt;">动画：</span> <span style="font-size: 14pt;">从一个状态到另一个状态，过程中每个时间点都可以控制。</span></div><div><span style="font-size: 10pt;">关键帧：</span> ：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }</div><div>动画属性： animation{ 1 , 2 , 3 , 4 , 5 }</div><ol><li><div>动画帧</div></li><li><div>执行时间</div></li><li><div>过渡函数</div></li><li><div>动画执行的延迟（可省略）</div></li><li><div>动画执行的次数</div></li></ol><div><br/></div><div><span style="color: rgb(255, 70, 53); font-family: 华文隶书; font-size: 18pt;">JavaScript详解</span></div><div><font style="font-size: 10pt;"><br/></font></div><div><span style="font-size: 16pt;">JavaScript介绍：</span></div><ol><li><div>java和javascript没有关系</div></li><li><div>JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为</div></li><li><div>JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释 执行代码，不进行预编译。</div></li></ol><div><span style="font-size: 12pt;">特点：</span></div><ol><li><div>可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运 行）</div></li><li><div>解释执行：事先不编译，逐行执行</div></li><li><div>基于对象：内置大量现成对象</div></li></ol><div>javascript适用于：（1） 客户端数据计算 （2） 客户端表单合法性验证（3） 浏览器事件的触发 （4） 网页特殊显示效果制作</div><div><span style="font-size: 16pt;">js组成：</span></div><ol><li><div>ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准</div></li><li><div>DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每 一个节点</div></li><li><div>BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改 变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀 疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。</div></li></ol><div>                                              （1） 移动、关闭浏览器窗口以及调整窗口大小</div><div>                                              （2） 提供 Web 浏览器详细信息的定位对象</div><div>                                              （3） 提供用户屏幕分辨率详细信息的屏幕对象</div><div>                                              （4）对 cookie 的支持</div><div>                                              （5） IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而 实现ajax局部刷新技术</div><div><br/></div><div><span style="font-size: 16pt;">HTML与JavaScript结合方式：</span></div><div><span style="font-size: 14pt;">行内脚本：</span></div><ol><li><div>点击按钮（触发）</div></li><li><div>弹框（具体的操作）</div></li><li><div>eg：&lt;button onclick=&quot;alert('实打实大苏打'）&quot;&gt;点我&lt;/button&gt;</div></li></ol><div><span style="font-size: 16pt;">内部脚本：</span></div><ol><li><div>使用&lt;script&gt;&lt;/script&gt;</div></li><li><div>标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以</div></li></ol><div><span style="font-size: 16pt;">外部脚本：</span></div><ol><li><div>在项目根目录下创建一个目录js</div></li><li><div>在js目录中创建一个文件，后缀名是</div></li><li><div>在html页面中，使用&lt;script src=&quot;&quot;&gt;&lt;/script&gt;</div></li></ol><div><span style="font-size: 12pt;">注意：</span> <span style="font-size: 12pt;">以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。</span></div><div><span style="font-size: 12pt;"><br/></span></div><div><span style="font-size: 16pt;">javascript的使用：</span></div><div><span style="font-size: 14pt;">变量：</span> <span style="font-size: 10pt;">在定义变量的时候，所有的数据类型都是var</span></div><div><font style="font-size: 10pt;"><br/></font></div><ol><li><div>声明变量： eg: var x ; var x,y;</div></li><li><div>数值类型：number   (1)不区分整型数值和浮点型数值     (2) 所有数字都采用 64 位浮点格式存储，类似于double 格式</div></li><li><div>字符串：string            首尾由单引号或双引号括起      eg:var aa=&quot;dsadsad\&quot;dhjsahdjksa&quot;;</div></li><li><div>布尔类型：(1) 仅有两个值：true和false也代表1和0          (2)  实际运算中true=1,false=0</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">自动类型转换</span></div><ol><li><div>数字 + 字符串：数字转换为字符串</div></li><li><div>数字 + 布尔值：true转换为1，false转换为0</div></li><li><div>字符串 + 布尔值：布尔值转换为字符串true或false</div></li><li><div>布尔值 + 布尔值：布尔值转换为数值1或0</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">数据类型转换函数 </span></div><ol><li><div><span style="font-size: 10pt;">parseInt：强制转换成整</span><span style="font-size: 10pt;">数 </span> 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值 不是数字）</div></li><li><div>parseFloat：强制转换成浮点数  <span style="font-size: 10pt;"> </span> 如果不能转换，则返回 NaN</div></li><li><div>typeof：查询数值当前类型，返回 string / number / boolean / object <span style="font-size: 10pt;"> </span></div></li></ol><div><br/></div><div><span style="font-size: 16pt;">null与undefined</span></div><ol><li><div>null 在程序中代表“无值”或者“无对象”     可以通过给一个变量赋值 null 来清除变量的内容</div></li><li><div>undefined： 声明了变量但从未赋值或者对象属性不存在</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">常用字符串API</span></div><ol><li><div>  length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号</div></li><li><div>toUpperCase/toLowerCase :转大小写</div></li><li><div>charAt(下标) ： 返回某个下标上的字符</div></li><li><div>indexof(字符)：查找字符串中字符出现的首次下标</div></li><li><div>lastIndexof(字符)：查找字符串中字符最后一次出现的下标</div></li><li><div>substring(开始,结束)：截取</div></li><li><div>replace(旧的,新的)：将字符串中的旧字符替换成新字符</div></li><li><div>split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型</div></li></ol><div><span style="font-size: 16pt;">数组</span></div><div><span style="font-size: 16pt;">常用方法：</span></div><ol><li><div>tostring()：将数组转换成字符串</div></li><li><div>join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。</div></li><li><div>concat(新元素)：将原来的数组连接新元素，原数组不变。</div></li><li><div>slice(开始，结束)：在数组中提取一部分，形成新的数组。</div></li><li><div>reverse()：数组的反转（倒序）</div></li><li><div>sort()：数组排序 （1） arr.sort() 字符排序   （2 ） arr.sort(func) 数值排序</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">Math数学对象</span></div><ol><li><div>Math 对象用于执行数学任务</div></li><li><div>没有构造函数 Math()</div></li><li><div>无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">Number对象</span></div><div><span style="font-size: 10pt;">格式：</span> Number.fixed(2) 会自动四舍五入</div><div><br/></div><div><span style="font-size: 16pt;">日期对象</span></div><div><span style="font-size: 12pt;">方法：需要先创建一个数组再调用对象这里先把变量名称为time</span></div><ol><li><div>time.getFullYear()</div></li><li><div>time.getMonth()</div></li><li><div>time.getDate()</div></li><li><div>time.getHours()</div></li><li><div>time.getMinutes()</div></li><li><div>time.getSeconds()</div></li><li><div>time.getMilliseconds()</div></li></ol><div><font style="font-size: 16pt;"><br/></font></div><div><span style="font-size: 16pt;">函数</span></div><ol><li><div>使用关键字 function 定义函数</div></li><li><div>函数声明后不会立即执行，会在我们需要的时候调用到。</div></li></ol><div><span style="font-size: 12pt;">注意：</span></div><ol><li><div><span style="font-size: 10pt;">形参：一定不要带数据类型</span></div></li><li><div><span style="font-size: 10pt;">分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号 结束。</span></div></li></ol><div><br/></div><div><span style="font-size: 16pt;">闭包</span></div><div><span style="font-size: 10pt;">概念：</span> 指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一 个函数。</div><div>作用： 访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理</div><div>简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据 的安全唯一性</div><div>全局变量，声明的时候可以不使用var， 不使用var声明的变量，就是全局变量</div><div>用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能 在其声明的函数内部</div><div>闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干 扰。</div><div><br/></div><div>直观的说就是形成一个不销毁的栈环境。</div><div>优点： 方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避 免了传参的问题 </div><div>缺点： 使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭 包就会造 成内存泄露，内存消耗很大</div><div><br/></div><div><span style="font-size: 16pt;">弹框输出</span></div><ol><li><div>普通弹框 alert(&quot;hello，拉勾&quot;);</div></li><li><div>控制台日志输出 console.log(&quot;谷歌浏览器按F12进入控制台&quot;);</div></li><li><div>页面输出 document.write</div></li><li><div>确认框 confirm（ &quot;确定删除吗？&quot; ）；</div></li><li><div>输入框 prompt(&quot;请输入姓名：&quot;);</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">DOM操作</span></div><div><span style="font-size: 10pt;">文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节 点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了</span></div><ol><li><div>在节点树中，顶端节点就是根节点（root）</div></li><li><div>每个节点都有父节点（除了根节点）</div></li><li><div>任何一个节点都可以拥有任意数量的子节点</div></li><li><div>同胞是拥有相同父节点的节点</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">DOM访问</span></div><ol><li><div>getElementById：通过id属性获得元素节点对象</div></li><li><div>getElementsByName：通过name属性获得元素节点对象集</div></li><li><div>getElementsByTagName：通过标签名称获得元素节点对象集</div></li></ol><div><font style="font-size: 10pt;"><br/></font></div><div><span style="font-size: 16pt;">DOM修改</span></div><div>修改 HTML DOM 意味着许多不同的方面：</div><ol><li><div>改变 HTML 内容</div></li><li><div>改变 CSS 样式</div></li><li><div>改变 HTML 属性</div></li><li><div>创建新的 HTML 元素</div></li><li><div>删除已有的 HTML 元素</div></li><li><div>改变事件（处理程序）</div></li></ol><div><span style="font-size: 12pt;">注意：</span>删除节点时 必须通过父节点，才能删除子节点</div><div><br/></div><div><span style="font-size: 16pt;">事件：</span> <span style="font-size: 10pt;">js捕获某个动作而做出的反馈</span></div><div><font style="font-size: 10pt;"><br/></font></div><div>HTML 事件的例子：</div><ol><li><div>当用户点击鼠标时</div></li><li><div>当网页已加载时</div></li><li><div>当图片已加载时</div></li><li><div>当鼠标移动到元素上时                                 </div></li><li><div>当输入字段被改变时</div></li><li><div>当 HTML 表单被提交时</div></li><li><div>当用户触发按键时</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">窗口事件（window exents）</span></div><div>仅在 body 和 frameset 元素中有效。</div><ol><li><div>onload 当文档被载入时执行脚本</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">表单元素事件（form lement events）</span></div><div>仅在表单元素中有效。</div><ol><li><div>onblur 当元素失去焦点时执行脚本</div></li><li><div>onfocus 当元素获得焦点时执行脚本</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">鼠标事件</span></div><ol><li><div>onclick 当鼠标被单击时执行脚本</div></li><li><div>ondblclick 当鼠标被双击时执行脚本</div></li><li><div>onmouseout 当鼠标指针移出某元素时执行脚本</div></li><li><div>onmouseover 当鼠标指针悬停于某元素之上时执行脚本</div></li></ol><div><br/></div><div><span style="font-size: 16pt;">事件冒泡:</span> <span style="font-size: 10pt;">先子，后父。事件的触发顺序自内向外</span></div><div>x.stopPropagation() 冒泡机制</div><div><br/></div><div><span style="font-size: 16pt;">事件捕获：</span> <span style="font-size: 10pt;">先父,后子。事件触发顺序变更为自外向内</span></div><div><font style="font-size: 10pt;"><br/></font></div><div><span style="font-size: 16pt;">JSON</span></div><ol><li><div>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。</div></li><li><div>易于人阅读和编写，同时也易于机器解析和生成</div></li></ol><div>格式： { </div><div>                属性1：值1， </div><div>                属性2：值2，</div><div>                。。。。</div><div>             }</div><div><span style="font-size: 16pt;">BOM操作：</span> 就是javascript对浏览器的一些常规操作的方法</div><div><span style="font-size: 14pt;">screen屏幕对象</span></div><div><span style="font-size: 10pt;">eg:</span> &lt;script&gt;function kai() {</div><div> alert(window.screen.width + &quot;|&quot; + window.screen.height);</div><div> }&lt;/script&gt;</div><div><br/></div><div><span style="font-size: 16pt;">location定位：</span> <span style="font-size: 10pt;">包含有关当前 URL 的信息，通常用来做页面跳转</span></div><div><span style="font-size: 16pt;">history浏览器历史：</span> <span style="font-size: 10pt;">history对象会记录浏览器的痕迹</span></div><div><font style="font-size: 10pt;"><br/></font></div><div><span style="font-size: 16pt;">计时操作</span></div><div><span style="font-size: 14pt;">周期性定时器 setInterval</span></div><div><span style="font-size: 10pt;">关键字：</span> setInterval(1,2)：周期性触发代码exp （常用）</div><ol><li><div>执行语句</div></li><li><div>时间周期，单位为毫秒</div></li></ol><div><font style="font-size: 16pt;"><br/></font></div><div><span style="font-size: 16pt;"><br/></span></div><div>一次性定时器 setTimeout： 相当于延迟的效果，只执行一次 </div><div>关键字： setTimeout(）</div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></div></span>
</div></body></html> 